<template>
  <div class="container">
    <div class="topTitle">
      <span class="text">内部系统数据看板驾驶舱</span>
    </div>
    <div class="center">
      <!--      <div class="left">-->
      <!--        <img src="../assets/login/left.png" alt="" />-->
      <!--      </div>-->

      <el-form ref="user" :rules="rules" :model="user" label-width="80px">
        <div class="form_top">
          <el-form-item prop="username">
            <div class="input_img">
              <img src="../assets/login/user.png" style="flex: none" alt="" />
              <el-input v-model="user.username" placeholder="请输入账号">
              </el-input>
            </div>
          </el-form-item>
          <!-- prop:校验时绑定的字段
            @keyup.native.enter:回车时触发的事件
          -->
          <el-form-item label="" prop="password">
            <div class="input_img">
              <img
                src="../assets/login/password.png"
                style="flex: none"
                alt=""
              />
              <el-input
                placeholder="请输入密码"
                v-model="user.password"
                type="password"
                @keyup.native.enter="login"
              >
              </el-input>
            </div>
          </el-form-item>
          <el-form-item label="" prop="captcha">
            <div class="input_img">
              <img src="../assets/login/user.png" style="flex: none" alt="" />
              <el-input
                placeholder="请输入验证码"
                v-model="user.captcha"
                type=""
                @keyup.native.enter="login"
              >
                <!--                <canvas slot="prepend" class="mycanvas" width="100" height="34" @click="changeCanvas"></canvas>-->
              </el-input>
              <img :src="imgUrl" @click="getCode" />
            </div>
          </el-form-item>
        </div>

        <el-form-item class="btn">
          <!--              <el-button @click="loginRest">重置</el-button>-->
          <div class="login_button" @click="login">立即登录</div>
        </el-form-item>
      </el-form>
    </div>
    <div class="footer">
      Copyright &copy; 2023
      <a href="http://www.zj-hc168.com" target="_blank">华创设计</a> 出品
    </div>
  </div>
</template>

<script>
import { getCode, login } from "@/api/login.js";
import { setToken } from "@/utils/auth";
export default {
  data() {
    return {
      imgUrl: "",
      user: {
        username: "",
        password: "",
        captcha: "",
      },
      // 校验
      rules: {
        // 校验字段
        username: [
          /* required: 是否在字符前加红
            message:校验不通过,提示的文字
            trigger:失去焦点时触发
            min:该字段最小长度
            max:该字段最大长度
          */
          { required: true, message: "请输入用户名", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        captcha: [
          { required: true, message: "请输入验证码", trigger: "blur" },
          // { min: 3, max: 8, message: "", trigger: "blur" },
        ],
      },
      randomCode: "",
    };
  },
  mounted() {
    this.handleInit();
    // this.getCode();
    // this.changeCanvas()
  },
  methods: {
    handleInit() {
      let loginResult = localStorage.getItem("setCrossData");
      if (loginResult) {
        console.log("后台内部系统跳转token", loginResult);
        loginResult = JSON.parse(loginResult);
        let token = loginResult.token;
        setToken(token);
        localStorage.setItem("token", token);
        this.$router.push("/dashboard/dashboard");
      } else {
        this.getCode();
      }
    },
    async loginRequest(data) {
      const res = await login(data);
      console.log(res);
      if (res.code == 200) {
        let token = res.result.token;
        setToken(token);
        localStorage.setItem("token", token);
        localStorage.setItem("setCrossData", JSON.stringify(res.result));
        this.$store.commit("setUserInfo", res.result.userInfo);
        this.$router.push("/dashboard/dashboard");
        this.$message.success(res.message);
      } else {
        this.$message.error(res.message);
        this.getCode();
      }
      // this.$router.push("/home");
    },
    async getCode() {
      const res = await getCode(12);
      console.log(res);
      this.imgUrl = res.result;
    },
    randomColor() {
      //得到随机的颜色值
      var r = Math.floor(Math.random() * 256);
      var g = Math.floor(Math.random() * 256);
      var b = Math.floor(Math.random() * 256);
      return "rgb(" + r + "," + g + "," + b + ")";
    },
    login() {
      // 对表单进行预验证验证
      this.$refs.user.validate((valid) => {
        if (!valid) return;
        this.user.checkKey = 12;

        /*axios的post请求方法,拼接的是main.js 中的配置的地址
          , 后面传的参数,后台接口直接用对象接收,
          等价于 {'username':this.user.username,'password':'this.user.password'}

        */
        this.loginRequest(this.user);
        // this.$http.post("/login/login", this.user).then(res => {
        //   //返回的对象
        //   const body = res.data;
        //   if (body.code === 0) {
        //     this.$message.success("登录成功");

        // 将返回的token存储在sessionStorage
        // window.sessionStorage.setItem(
        //   "token",
        //   "dgfjahsddffggjdfgasfjksadhfkjdhsak"
        // );
        //校验成功,路由跳转到/home
      });
    },

    // changeCanvas() {
    //   //随机生成4位字符，并画图到区域
    //   var code = "23456789abcdefhjkmnpqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ";
    //   this.randomCode = "";
    //   for (let a = 0; a < 4; a++) {
    //     let index = Math.floor(Math.random() * (code.length - 1) + 1);
    //     this.randomCode += code[index];
    //
    //   }
    //   console.log(this.randomCode)
    //   this.doDraw();
    // },
    doDraw() {
      let x = 20;
      let y = 20 + Math.random() * 8;
      var deg = (Math.random() * 30 * Math.PI) / 180;
      //  获取canvas
      var canvas = document.getElementsByClassName("mycanvas");
      let a = canvas[0].width;
      let b = canvas[0].height;
      canvas[0].width = a; //清空画布
      canvas[0].height = b;
      var canvas_width = canvas[0].width;
      var canvas_height = canvas[0].height;
      var context = canvas[0].getContext("2d");
      context.font = "bold 23px 微软雅黑";
      context.fillText(this.randomCode, 15, 30);
      context.translate(x, y); //canvas原点的偏移量
      context.rotate(deg); //旋转度数
      context.fillStyle = this.randomColor(); //设置颜色
      context.strokeStyle = this.randomColor(); //设置颜色
      context.rotate(-deg);
      context.translate(-x, -y);
      for (var i = 0; i <= 3; i++) {
        //验证码上显示线条
        context.strokeStyle = this.randomColor(); //轮廓风格
        context.beginPath();
        context.moveTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.lineTo(
          Math.random() * canvas_width,
          Math.random() * canvas_height
        );
        context.stroke();
      }
      for (var j = 0; j <= 20; j++) {
        //验证码上显示小点
        context.strokeStyle = this.randomColor();
        context.beginPath(); //新建一条路径
        let x = Math.random() * canvas_width;
        let y = Math.random() * canvas_height;
        context.moveTo(x, y); //吧画笔移动到指定位置
        context.lineTo(x + 1, y + 1); //想指定位置移动
        context.stroke();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.container {
  position: relative;
  min-width: 1024px;
  max-width: 1920px;
  height: 1080px;
  background: url(../assets/dashboard/bg.png) no-repeat 0 0;
  background-size: 100% 100%;
  .topTitle {
    height: 104px;
    width: 100%;
    margin-top: -9px;
    background: url(../assets/dashboard/top.png) no-repeat 0 0;
    background-size: 100% 100%;
    text-align: center;
    line-height: 96px;
    margin-bottom: 7%;
    .text {
      font-size: 64px;
      cursor: pointer;
      font-family: "庞门正道标题体";
      letter-spacing: 6px;
      background: linear-gradient(180deg, #ffffff 10%, #44d4ff 100%);
      -webkit-background-clip: text;
      color: transparent;
    }
  }
  //.center {
  //display: flex;
  //justify-content: space-between;
  //width: 1380px;
  //height: 500px;
  ////background-color: #fff;
  //position: absolute;
  //top: 0;
  //left: 0;
  //bottom: 0;
  //right: 0;
  //margin: auto;
  .center {
    //margin-top: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 510px;
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    align-items: center;
    //height: 450px;
    background: url(../assets/login/login_bg.png) no-repeat 0 0;
    background-size: 100% 100%;
    .form_top {
      margin-top: 65px;
      .input_img {
        display: flex;
        background: #02293233;
        border: 1px solid #2eceff;
        border-radius: 4px;
        height: 60px;
      }
    }
    .login_button {
      width: 360px;
      height: 64px;
      background: url(../assets/login/bt.png) no-repeat 0 0;
      background-size: 100% 100%;
      text-align: center;
      line-height: 64px;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: 2px;
      margin-left: -6px;
      margin-top: 20px;
    }
  }

  .footer {
    position: absolute;
    width: 100%;
    bottom: 0;
    padding: 0 16px;
    margin: 48px 0 24px;
    text-align: center;
    color: #ffffff;
    font-size: 14px;
  }
}

::v-deep .el-form-item__label {
  color: #fff;
}
::v-deep .el-form-item__content {
  width: 350px;
  margin-left: 0 !important;
}
::v-deep .el-input__inner {
  //width: 400px;
  height: 60px;
  background: #02293233;
  border: none;
  color: #fff;
}
</style>
